<template>
	<view class="app-view">
		<view class="page-wrap" v-if="isShow">
			<view class="box box1">
				<view class="p3">
					<text class="symbol">
						¥
					</text>
					<text>{{AllSelectMoney}}</text>
				</view>
				<view class="p2">
					<text>{{content}}</text>
				</view>
			</view>
			<view class="box box2">
				<view class="p ui-flex">
					<view class="ui-box">
						订单编号：
					</view>
					<view class="flex_1">
						{{order_id}}
					</view>
				</view>
				<view class="p ui-flex">
					<view class="ui-box">
						收货信息：
					</view>
					<view class="flex_1">
						{{addressData.consignee}} {{addressData.tel|phone}}
						<br>
						{{addressData|city}}
					</view>
				</view>
			</view>
			<view class="box box3">
				<view class="head">
					<text>支付工具</text>
				</view>
				<view class="list">
					<view class="ul">
						<view class="li" v-for="(item,index) in pay_list.slice(0,3)" :key="item.index"
							@click="pay_index=index">
							<view class="item el-flex" :class="{'active':item.index==pay_index}">
								<view class="ui-flex ">
									<image class="pay_icon" :src="item.img" mode=""></image>
									<text>{{item.name}}</text>
								</view>
							</view>
							<view class="company">
								{{item.msg}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box box3">
				<view class="head">
					<text>信贷产品</text>
				</view>
				<view class="list">
					<view class="ul">
						<view class="li" v-for="(item,index) in pay_list.slice(3)" :key="item.index"
							@click="pay_index=index+3">
							<view class="item el-flex" :class="{'active':item.index==pay_index}">
								<view class="ui-flex ">
									<image class="pay_icon" :src="item.img" mode=""></image>
									<text>{{item.name}}</text>
								</view>
							</view>
							<view class="company">
								{{item.msg}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box box5">
				<view class="ui-button" @click="goPayMent">
					确认支付 ¥{{AllSelectMoney}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showModal from '../../common/js/showModal.js'
	export default {
		filters: {
			phone: function(tel) {
				if (tel) {
					let str = tel.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2');
					return str
				}
			},
			city: function(obj) {
				if (obj.address) {
					return obj.province + obj.city + obj.district +
						obj.area + obj.address;
				}
			},
		},
		data() {
			return {
				isShow: false,
				addressData: {},
				checkout_goods: [],
				endTime: 0,
				content: '支付剩余时间: 00:00:00',
				order_id: '',
				pay_index: 0,
				pay_list: [{
					name: '支付宝支付',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_alipaywap.png',
					msg: '支付宝（中国）网络技术有限公司',
					index: 0
				}, {
					name: '小米钱包',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_micash_wap.png',
					msg: '捷付睿通股份有限公司',
					index: 1
				}, {
					name: '微信支付',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_weixin_wap.png',
					msg: '财付通支付科技有限公司',
					index: 2
				}, {
					name: '信用卡分期',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_micashcreditinstallment_wap.png',
					msg: '由各大商业银行提供服务',
					index: 3
				}, {
					name: '小米分期',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_mifinanceinstal_m.png',
					msg: '重庆小米消费金融有限公司及合作金融机构',
					index: 4
				}, {
					name: '白条分期',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_baitiao_wap.png',
					msg: '重庆京东盛际小额贷款有限公司及合作金融机构',
					index: 5
				}, {
					name: '花呗分期',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_antinstal_m.png',
					msg: '重庆蚂蚁消费金融有限公司及合作金融机构',
					index: 6
				}, ]
			};
		},
		watch: {
			endTime(newVal) {
				this.countdowm(this.endTime)
			}
		},
		computed: {
			AllSelectMoney() {
				let total = 0
				this.checkout_goods.forEach(i => {
					total += Number(i.price) * i.count
					i.packageList.forEach(j => {
						total += Number(j.price) * i.count
					})
					i.serveArr.forEach(j => {
						total += Number(j.price) * i.count
					})
				})
				return total;
			},
		},
		methods: {
			goPayMent() {
				let name = this.checkout_goods[0].name
				uni.request({
					url: 'http://42.193.218.104:7744/payment',
					method: 'POST',
					data: {
						order_id: this.order_id,
						price: this.AllSelectMoney,
						name: name
					},
					success: function(res) {
						if (res.data.code == 200) {
							/*#ifdef H5*/
							window.location.href = res.data.data.paymentUrl
							/*#endif*/
							/*#ifdef APP-PLUS*/
							plus.runtime.openURL(res.data.data.paymentUrl)
							/*#endif*/
						}
					},
					fail: function(err) {

					}
				})
			},
			countdowm(timestamp) {
				let self = this;
				let timer = setInterval(function() {
					let nowTime = new Date();
					let endTime = new Date(timestamp);
					let t = endTime.getTime() - nowTime.getTime();
					if (t > 0) {
						let day = Math.floor(t / 86400000);
						let hour = Math.floor((t / 3600000) % 24);
						let min = Math.floor((t / 60000) % 60);
						let sec = Math.floor((t / 1000) % 60);
						hour = hour < 10 ? "0" + hour : hour;
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						format = `支付剩余时间: ${hour}:${min}:${sec}`;
						self.content = format;
					} else {
						clearInterval(timer);
						self.content = '请尽快完成支付，超时订单将关闭'
					}
				}, 1000);
			},
			showModal() {
				uni.showModal({
					title: '温馨提示',
					content: '订单不是待支付状态',
					showCancel: false,
					success(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/subPage/checkout/checkout'
							})
						}
					}
				})
			},
			clearSubPayData(order_id) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/clearSubPayData',
					method: 'POST',
					header: {
						Authorization: userToken
					},
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShow = false
							self.showModal()
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {
						uni.redirectTo({
							url: '/pages/error/error'
						})
					}
				})
			},
			getOrderData(order_id) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getOrderData',
					method: 'POST',
					data: {
						order_id: order_id,
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							let time = Date.now()
							if (res.data.data.payEndTime + 60000 > time > res.data.data.payEndTime) {
								self.content = '请尽快完成支付，超时订单将关闭'
							} else if (res.data.data.payEndTime + 60000 < time) {
								self.clearSubPayData([res.data.data.order_id])
								return;
							}
							self.endTime = res.data.data.payEndTime
							self.countdowm(self.endTime)
							self.checkout_goods = res.data.data.goods
							self.isShow = true
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						} else if (res.data.code == 403) {
							self.isShow = false
							self.showModal()
						}
					},
					fail: function(err) {
						uni.redirectTo({
							url: '/pages/error/error'
						})
					}
				})
			}
		},
		onShow() {
			if (this.order_id) {
				this.getOrderData(this.order_id)
			}
		},
		onLoad(e) {
			if (!e.order_id) {
				uni.redirectTo({
					url: '/pages/error/error'
				})
			} else {
				this.order_id = e.order_id
				let address_item = uni.getStorageSync('checkout_address')
				if (!address_item || address_item.length === 0) {
					return;
				} else {
					address_item.forEach(item => {
						if (item.is_default) {
							this.addressData = item
						}
					})
				}
			}
		},
		onUnload() {
			uni.$emit('come_from_pay', true)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
	}

	.app-view {
		background-color: #f5f5f5;
		color: #3c3c3c;
		position: relative;
		max-width: 7.2rem;
		margin: 0 auto;

		.page-wrap {
			padding-bottom: 1rem;

			.box1 {
				padding: 0.4rem 0.2rem;
				text-align: center;
				padding-top: 0.6rem;

				.p3 {
					color: #ff5934;
					font-size: .32rem;

					text {
						font-size: .56rem;
						margin-left: 0.1rem;
						font-weight: 500;
					}

					.symbol {
						font-size: .4rem;
						font-weight: 500;
						position: relative;
						top: -0.1rem;
					}

				}

				.p2 {
					margin-top: 0.2rem;

					text {
						font-size: .24rem;
						line-height: .5rem;
						color: rgba(0, 0, 0, .3);
						background-color: #ebebeb;
						padding: 0.08rem 0.33rem;
						border-radius: 0.2rem;
					}
				}
			}

			.box2 {
				padding: 0.3rem;
				text-align: left;
				background: #fff;
				margin: 0 0.24rem 0.2rem;
				border-radius: 0.16rem;

				.p {
					font-size: .24rem;
					color: rgba(0, 0, 0, .3);
					line-height: .42rem;

					.ui-box {
						width: 1.35rem;
					}

					view {
						font-size: .24rem;
						line-height: .42rem;
					}
				}

				.ui-flex {
					display: flex;
					text-align: left;
				}

				.flex_1 {
					flex: 1;
				}
			}

			.box3 {
				padding: 0.1rem 0.3rem 0.3rem;
				text-align: left;
				background: #fff;
				margin: 0 0.24rem 0.2rem;
				border-radius: 0.16rem;

				.head {
					text {
						font-size: .28rem;
						color: #000;
						line-height: .7rem;
						font-weight: 700;
					}
				}

				.list {
					padding-top: 0;
					padding-bottom: 0;

					.ul {
						.li {
							padding: 0.08rem 0;

							.item {
								padding-top: 0.2rem;
								padding-right: 0.6rem;
								background-image: url(../../static/images/cart_checkbox_unselect_icon.png);
								background-position: 100% 50%;
								background-repeat: no-repeat;
								background-size: 0.4rem 0.4rem;
								justify-content: space-between;

								.ui-flex {
									display: flex;
									align-items: center;
								}

								.pay_icon {
									display: block;
									max-width: 0.5rem;
									max-height: 0.5rem;
									margin-right: 0.3rem;
								}

								text {
									font-size: .26rem;
									line-height: .5rem;

									color: #333;
								}
							}

							.active {
								background-image: url(../../static/images/cart_checkbox_select_icon.png);
								color: #f60;
							}

							.company {
								color: #999;
								margin-left: 0.8rem;
								font-size: .22rem;
								padding: 0.05rem 0;
							}
						}
					}
				}
			}

			.box5 {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				max-width: 7.2rem;
				margin: 0 auto;
				background: #fff;

				.ui-button {
					width: 6.56rem;
					display: block;
					background-image: linear-gradient(67deg, #ff7b29, #ff5900 98%);
					border-radius: 0.4rem;
					text-align: center;
					height: 0.72rem;
					line-height: .72rem;
					border: 0.3px solid #ff5722;
					font-size: .3rem;
					color: #fff;
					margin: 0.13rem auto;
				}
			}
		}
	}
</style>